import React from 'react'
import {Menu} from 'antd'
import {NavLink} from 'react-router-dom'
import MenuConfig from './../../config/menuConfig'
import './index.less'
const SubMenu = Menu.SubMenu;
export default class NavLeft extends
    React.Component{

    componentWillMount(){
        //利用递归的方式进行菜单的渲染。
   const menuTreeNode =   this.renderMenu(MenuConfig)
        this.setState({
            menuTreeNode
        })
    }
    //菜单渲染
    renderMenu=(data)=>{
        //map函数的应用
          return data.map((item) =>{
              if(item.children){
                 return(
                     <SubMenu title={item.title} key={item.key}>
                         {this.renderMenu(item.children)}
                     </SubMenu>
                 )
              }
              return <Menu.Item title={item.title} key={item.key}>
                <NavLink to={item.key}>{item.title}</NavLink>
                  </Menu.Item>
        })
    }
    render(){
        return(
           <div className="nav-left">
               <div className="logo">
                   <img src="/assets/logo-ant.svg" alt="图标"/>
                   <h1>Imooc MS</h1>
               </div>
               <Menu theme="dark">
                   {this.state.menuTreeNode}
               </Menu>
           </div>
        )
    }
}